<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>3D动画翻转</title>
    <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
    <style>
        .book {
            width:460px;
            height:300px;
            position:relative;
            margin:10px 300px;
            -webkit-transform-style:preserve-3d;
            -moz-transform-style:preserve-3d;
            -ms-transform-style:preserve-3d;
            transform-style:preserve-3d;
            transform:rotatex(30deg);
        }
        .page {
            width:230px;
            height:300px;
            border:1px solid #666;
            position:absolute;
            transform-origin:left;
            transform-style:preserve-3d;
            backface-visibility:hidden;
            font-size:60px;
            text-align:center;
        }
        .page span {
            display:block;
            height:100%;
            width:100%;
            position:absolute;
            /*background-image:url(../img/img_1001.jpg);
            background-size:100% 100%;
            */
        }
        .page span:nth-child(2) {
            transform:rotatey(-180deg);
            backface-visibility:hidden;
        }
        .bookImage {
            width:230px;
            height:300px;
        }
        .serialNum {
            width:40px;
            height:40px;
            font-size:36px;
            border:1px solid #6d9c36;
            color:#7b7115;
            opacity:0.8;
            position:absolute;
            top:5px;
            right:5px;
            background-color:#fff0f0;
        }
        #but {
            width:300px;
            height:50px;
            margin:10px;
        }
        #after {
            width:60px;
            height:30px;
            float:right;
            margin-right:10px;
        }
        #before {
            width:60px;
            height:30px;
            float:left;
            margin-left:10px;
        }
        /*以下两个动画可以只使用第一个，animation中有reverse，可以反向执行动画，
                    使用时需要在JS中点击上一页时添加改属性值*/
 
 
        /*翻书下一页的动画*/
 
        @keyframes page {
            0% {
                transform:rotateY(0deg);
            }
            100% {
                transform:rotateY(-180deg);
                z-index:10;
            }
        }/*翻书上一页的动画*/
 
        @keyframes page1 {
            0% {
                transform:rotateY(-180deg);
                z-index:10;
            }
            100% {
                transform:rotateY(0deg);
            }
        }</style>
</head>
 
 
<body>
 
<div class="book">
    <div class="page">
        <span><div class="serialNum">1</div><img class="bookImage" src="https://img-blog.csdnimg.cn/20190215160849926.jpg"></span>
        <span><div class="serialNum">2</div><img class="bookImage" src="https://img-blog.csdnimg.cn/20190215160231221.jpg"></span>
    </div>
    <div class="page">
        <span><div class="serialNum">3</div><img class="bookImage" src="https://img-blog.csdnimg.cn/20190215160849926.jpg"></span>
        <span><div class="serialNum">4</div><img class="bookImage" src="https://img-blog.csdnimg.cn/20190215160231221.jpg"></span>
    </div>
 
    <div class="page">
        <span><div class="serialNum">5</div><img class="bookImage" src="https://img-blog.csdnimg.cn/20190215160849926.jpg"></span>
        <span><div class="serialNum">6</div><img class="bookImage" src="https://img-blog.csdnimg.cn/20190215160231221.jpg"></span>
    </div>
    <div class="page">
        <span><div class="serialNum">7</div><img class="bookImage" src="https://img-blog.csdnimg.cn/20190215160849926.jpg"></span>
        <span><div class="serialNum">8</div><img class="bookImage" src="https://img-blog.csdnimg.cn/20190215160231221.jpg"></span>
    </div>
 
    <div class="page">
        <span><div class="serialNum">9</div><img class="bookImage" src="https://img-blog.csdnimg.cn/20190215160849926.jpg"></span>
        <span><div class="serialNum">10</div><img class="bookImage" src="https://img-blog.csdnimg.cn/20190215160231221.jpg"></span>
    </div>
    <div class="page">
        <span><div class="serialNum">11</div><img class="bookImage" src="https://img-blog.csdnimg.cn/20190215160849926.jpg"></span>
        <span><div class="serialNum">12</div><img class="bookImage" src="https://img-blog.csdnimg.cn/20190215160231221.jpg"></span>
    </div>
</div>
 
 
<div id="but">
    <input type="button" value="上一页" id="before">
    <input type="button" value="下一页" id="after">
</div>
 
<script>
    var before = document.querySelector("#before");
    var after = document.querySelector("#after");
    //var book = document.querySelector(".book");
    var page = document.getElementsByClassName("page");
    var pageNum = document.getElementsByClassName("page").length;
 
    window.onload = function() {
        var middle = 0;
 
        for (var z = 0; z < pageNum; z++) {
            page[z].style.zIndex = pageNum - z;
        }
        after.onclick = function() {
            if (middle < pageNum) {
                page[middle].style.animation = "page 1.5s linear 1 forwards";
                middle++;
            }
            //    else {
            //       middle = pageNum;
            //    }
        };
        before.onclick = function() {
            if (middle > 0) {
                page[middle - 1].style.animation = "page1 1.5s linear 1 forwards";
                middle--;
            }
            //    else {
            //       middle = 0;
            //    }
        }
    }
</script>
 
</body>
</html>